<template>
  <div class="article">
    <header class="header">
      {{ article.title }}
    </header>
    <article class="real" v-html="article.article_html"></article>
  </div>
</template>

<script>
import { normlizeArticle } from "@/utils/utils";
import { get_one } from "@/api/article";
export default {
  name: "ArticleDetailArticle",
  data() {
    return {
      article: {}
    }
  },
  props: ["id"],
  async created() {
    const r = await get_one(this.id);
    const { article } = normlizeArticle(r.data);
    this.article = article;
  },
};
</script>

<style lang="scss" scoped>
.article {
  margin-top: 2rem;
  .header {
    font-size: 2.3rem;
    font-weight: bold;
    margin-bottom: 3rem;
  }
}
</style>